---
layout: demo
title: 动画角标纯CSS版
category: blog
custom_css: |
  <style type="text/css">
  body{width:500px;margin:0 auto;padding:20px;font-size:14px;}
  div{position:relative;margin-bottom:20px;border:1px solid #eee;padding:10px;}
  h1{font-size:100%;}

  .corner-ad{position:absolute;top:0;right:0;width:26px;height:16px;background-repeat:no-repeat;text-indent:-499px;overflow:hidden;}
  .corner-ad:hover{width:57px;height:36px;}
  .corner-ad{background-image:url(http://pics0.paipaiimg.com/update/20120401/index_201340300.png);}

  .corner-ad-1:hover{background-image:url(http://pics2.paipaiimg.com/update/20120405/index_235825383.gif);}
  .corner-ad-2:hover{background-image:url(http://pics3.paipaiimg.com/update/20120405/index_112852235.gif);}
  .corner-ad-3:hover{background-image:url(http://pics2.paipaiimg.com/update/20120405/index_113828605.gif);}

  </style>
---
<h1>{{page.title}}</h1>
<div>
<p>播放一次的GIF，再次移上时无动画效果（原生IE6/7除外）。</p>
<a class="corner-ad corner-ad-1" href="http://www.paipai.com" >拍拍网</a>
</div>
<div>
<p>重复播放的GIF，无暂停效果，用户体验差。</p>
<a class="corner-ad corner-ad-2" href="http://www.paipai.com" >拍拍网</a>
</div>
<div>
<p>重复播放的GIF（最后一帧停留5秒），再次移上时动画无法从第一帧开始播放（原生IE6/7除外）。</p>
<a class="corner-ad corner-ad-3" href="http://www.paipai.com" >拍拍网</a>
</div>
